import { Avatar, Card, Layout, List, Tag, Typography } from 'antd'
import ForumHome from 'Pages/ForumHome'
import React from 'react'
import { Link, Route, Switch } from 'react-router-dom'
import './index.scss'

const { Content, Sider } = Layout
const { Paragraph } = Typography

const Index = () => {
  const data = [
    {
      title: '【入吧必看】吧规',
      description: [
        // <Tag color='#1E90FF'>吧规</Tag>,
        // <Tag color='#FFA500'>置顶</Tag>,
      ],
      content:
        '补充下吧规，如果你们因为开车帖子被删除多次，将会封号一天作为处罚。',
    },
    {
      title: '大鸟转转转酒吧！',
      description: [
        // <Tag color='#FF0000'>热</Tag>,
        // <Tag color='#FFA500'>置顶</Tag>,
      ],
      content:
        '大鸟转转转酒吧，即Dicky Twister酒吧。大鸟转转转酒吧并不在扭扭街。在地图上属于蓝色点，位于德拉曼总部斜对面，高架桥下。游戏中除了剧情触发的，能攻略的好像只有扭扭街那一男一女了。大鸟转转酒吧就在主角V的公寓下面，会通过任务触发位置的。想要体验不一样的感受，男同性恋酒吧大鸟转转转不在扭扭街，在蓝色点，德拉曼总部斜对面，高架桥下面哦!公寓的位置就在序章过后玩家和杰克在的位置。',
    },
    {
      title: '这是测试标题！',
      content: '这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容',
    },
    {
      title: '这是测试标题！',
      content: '这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容',
    },
    {
      title: '这是测试标题！',
      content: '这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容',
    },
    {
      title: '这是测试标题！',
      content: '这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容',
    },
    {
      title: '这是测试标题！',
      content: '这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容',
    },
  ]

  return (
    <div>
      <Layout className="index-page">
        <Content
          className="index-content"
          style={{ padding: '0 24px', minHeight: 280 }}
        >
          <Switch>
            <Route exact path="/" component={ForumHome} />
            <Route exact path="/home" component={ForumHome} />
            <Route path="/home/ForumHome" component={ForumHome} />
          </Switch>
        </Content>
        <Sider
          className="side"
          width={300}
          style={{ backgroundColor: '#f0f2f5' }}
        >
          <Card className="side-right-card" title="公告栏">
            <Paragraph className="board-msg" ellipsis={{ rows: 1 }}>
              <Link className="title_link" to="/home/PostPage">
                Orange创始人华琳彭今晨宣布收购苹果公司
              </Link>
            </Paragraph>
            <Paragraph className="board-msg" ellipsis={{ rows: 1 }}>
              <Link className="title_link" to="/home/PostPage">
                哲学家麦文建言圣劳伦兹之泪获奖引发第二次陨石撞击地球
              </Link>
            </Paragraph>
            <Paragraph className="board-msg" ellipsis={{ rows: 1 }}>
              <Link className="title_link" to="/home/PostPage">
                老八餐馆倒闭！老板言：源于供应链垄断！
              </Link>
            </Paragraph>
          </Card>
          <Card className="side-right-card" title="关注动态">
            <List
              itemLayout="vertical"
              dataSource={data}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    style={{
                      marginBottom: 15,
                    }}
                    avatar={
                      <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    }
                    title={
                      <Paragraph
                        ellipsis={{ rows: 1 }}
                        style={{ marginBottom: 0 }}
                      >
                        <Link className="title_link" to="/home/post_page">
                          {item.title}
                        </Link>
                      </Paragraph>
                    }
                    description={item.description}
                  />
                  <Paragraph
                    className="context_shortcut"
                    ellipsis={{ rows: 1 }}
                  >
                    {item.content}
                  </Paragraph>
                  {/* {item.content} */}
                </List.Item>
              )}
            />
          </Card>
        </Sider>
      </Layout>
    </div>
  )
}

export default Index
